<template>
  <a-layout-header style="background: #fff; padding: 0">
    <menu-unfold-outlined v-if="collapsed" class="trigger" @click="toggleCollapsed" />
    <menu-fold-outlined v-else class="trigger" @click="toggleCollapsed" />
    <div style="float: right">
      您好：{{ userInfo.mobile }}&nbsp;&nbsp;
      <router-link to="/login" @click="logout">退出登录</router-link>
    </div>
  </a-layout-header>
</template>
<script setup lang="ts">
import { clearToken } from '@/utils/auth';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
const props = withDefaults(
  defineProps<{
    collapsed: boolean;
  }>(),
  {
    collapsed: false,
  }
);
const router = useRouter();
const userInfo = computed(() => {
  return JSON.parse(localStorage.getItem('userInfo') || '{}');
});

const emit = defineEmits(['update:collapsed']);
const toggleCollapsed = (): void => {
  emit('update:collapsed', !props.collapsed);
};
const logout = (): void => {
  localStorage.removeItem('userInfo');
  clearToken();
  router.push('/login');
};
</script>

<style scoped lang="less">
.wrapper {
}
</style>
